<template>
<div class="gift">
  <nav-bar title="邀请有礼" fixed="fixed">
    <span class="giftSlot" @click="$router.push({'path': '/commission'})">佣金明细</span>
  </nav-bar>
   <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
     <van-list
          v-model="loading"
          :finished="finished"
          :offset="50"
          :immediate-check="false"
          finished-text="暂无数据"
          @load="onLoad"
        >
      <div class="gift-box">
          <div class="gift-top">
            <div class="gift-code-box">
              <div class="tip">我的专属邀请码</div>
              <div class="code">
                <span>{{gift.inviteNo}}</span>
                <div class="copy" v-clipboard:copy="gift.inviteNo" v-clipboard:success="onCopy" v-clipboard:error="onError">
                  <span></span>
                </div>
              </div>
              <div class="CodeImg">
                <img :src="$SERVER_URL+'/common/two/bit/code?text=' + gift.downloadUrl" />
              </div>
            </div>
          </div>
          <div class="gift-info">
            <div class="item">
              <span>当前业绩流水</span>
              <span class="price">{{gift.totalPerformance}}</span>
            </div>
            <div class="item">
              <span>佣金总数</span>
              <span class="price">{{gift.totalCommission}}</span>
            </div>
          </div>
          <div class="gift-detail">
            <div class="tab-bar">
              <div class="item" :class="{ active: activeTabIndex === 0 }" @click="changeTab(0)">
                <div class="name">我的邀请</div>
                <div class="indicator"></div>
              </div>
              <div class="item" :class="{ active: activeTabIndex === 1 }" @click="changeTab(1)">
                <div class="name">佣金比例</div>
                <div class="indicator"></div>
              </div>
            </div>
            <div class="list">
              <div class="header item" v-if="activeTabIndex === 0">
                <span class="col">日期</span>
                <span class="col">被推荐人手机号</span>
                <span class="col">会员编号</span>
              </div>
              <template v-if="activeTabIndex === 0">
                <template v-for="(item,index) in recordList">
                  <div class="item" :key="'item-index-' + index">
                    <span class="col">{{item.create_time}}</span>
                    <span class="col">{{item.mobile}}</span>
                    <span class="col">{{item.member_no}}</span>
                  </div>
                </template>
              </template>
              <div class="header item" v-if="activeTabIndex === 1">
                <span class="col">阶梯</span>
                <span class="col">业绩流水</span>
                <span class="col">返点</span>
                <span class="col">佣金</span>
              </div>
              <template v-if="activeTabIndex === 1">
                <template v-for="(item,index) in CommissionSettingsList">
                  <div class="item" :key="'item-index-' + index">
                    <span class="col">{{item.id}}</span>
                    <span class="col">{{item.achievement_amount}}</span>
                    <span class="col">{{item.bonus_ratio}}</span>
                    <span class="col">{{item.bonus_amount}}</span>
                  </div>
                </template>
              </template>
            </div>
          </div>
        </div>
     </van-list>
    </van-pull-refresh>
</div>
</template>
<script>
export default {
  name: 'gift',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      activeTabIndex: 0,
      dataList: [],
      gift: {},
      recordList: [],
      pages: {
        page: 1,
        limit: 10
      },
      CommissionSettingsList: []
    };
  },
  created() {
    this.getInviteIndex();
    this.getInviteRecord();
    this.getCommissionSettings();
  },
  mounted() {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        // this.getCommissionRecord();
        this.isLoading = false;
      }, 500);
    },
    onCopy() {
      this.$toast('复制成功');
    },
    onError() {
      this.$toast('复制失败');
    },
    onLoad() {
      this.pages.page++;
      // 异步更新数据
      setTimeout(() => {
        !this.activeTabIndex ? this.getInviteRecord() : this.getCommissionSettings();
      }, 500);
    },
    changeTab(index) {
      this.recordList = [];
      this.CommissionSettingsList = [];
      !index ? this.getInviteRecord() : this.getCommissionSettings();
      this.$set(this, 'activeTabIndex', index);
    },
    getInviteIndex() {
      this.$API.user.getInviteIndex({}).then(res => {
        if (!res.code) {
          this.gift = res.data;
        }
      });
    },
    getInviteRecord() {
      this.$API.user.getInviteRecord(this.pages).then(res => {
        if (!res.code) {
          this.recordList = this.recordList.concat(res.data);
          // this.pages.page++;
          // 加载状态结束
          this.loading = false;
          if (this.recordList.length === res.count) {
            this.finished = true;
          }
        }
      });
    },
    getCommissionSettings() {
      this.$API.user.getCommissionSettings(this.pages).then(res => {
        if (!res.code) {
          this.CommissionSettingsList = this.CommissionSettingsList.concat(res.data);
          // this.pages.page++;
          // 加载状态结束
          this.loading = false;
          if (this.CommissionSettingsList.length === res.count) {
            this.finished = true;
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.nodata{
  min-height: 400px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F8F8F8;
  font-size:24px;
}
  .gift-box {
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;
    align-items: center;
    .gift-top {
      width: 100%;
      // height: 328px;
      background: #E31D1A;
      display: flex;
      justify-content: center;
      .gift-code-box {
        padding-top: 40px;
        .tip {
          height: 23px;
          font-size: 24px;
          font-weight: 500;
          color: #FFF;
          text-align: center;
        }
        .CodeImg{
          width: 200px;
          margin: 12px auto 140px;
          padding-left: 10px;
         img{
          width: 100%;
          height: auto;
         }
        }
        .code {
          position: relative;
          font-size: 48px;
          color: #FFF;
          padding: 0 60px;
          margin-top: 12px;
          .copy {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            display: inline-flex;
            align-items: center;
            span {
              width: 36px;
              height: 36px;
              display: block;
              background-image: url('../../assets/images/icon-copy.png');
              background-repeat: no-repeat;
              background-size: contain;
            }
          }
        }
      }
    }
    .gift-info {
      width: 670px;
      height: 240px;
      background: #FFF;
      box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.05);
      border-radius: 24px;
      margin-top: -104px;
      display: inline-flex;
      .item {
        flex: 1;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 600;
        color: #333;
        .price {
          margin-top: 10px;
          font-size: 48px;
          color: #E31D1A;
          font-weight: 700;
        }
      }
    }
    .gift-detail {
      margin-top: 24px;
      width: 100%;
      background-color: #FFF;
      .tab-bar {
        width: 100%;
        height: 88px;
        box-sizing: border-box;
        padding: 0 40px;
        display: inline-flex;
        .item {
          flex: 1;
          text-align: center;
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;;
          font-size: 28px;
          font-weight: 500;
          color: #333;
          position: relative;
          .name {
            height: 100%;
            display: inline-flex;
            align-items: center;
          }
          .indicator {
            display: none;
            position: absolute;
            width: 64px;
            height: 6px;
            bottom: 0;
            background: #E31D1A;
            border-radius: 3px;
          }
        }
        .active {
          font-size: 32px;
          font-weight: bold;
          color: #E31D1A;
          .indicator {
            display: block;
          }
        }
      }
      .list {
        .header {
          background-color: #F8F8F8;
          font-size: 28px;
          font-weight: bold;
          color: #333;
        }
        .item {
          width: 100%;
          height: 88px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          // line-height: 28px;
          color: #666;
          .col {
            flex: 1;
            text-align: center;
          }
        }
      }
    }
  }
</style>
